<template>
  <div class="pay">
    <div class="tab">
      <el-tabs v-model="activeName">
        <el-tab-pane label="处理信息" name="first">
          <div style="margin: 0 0 10px 0">
            <span style="margin: 0 10px 0 0">订单号:</span>
            <span>{{ payData.orderId }}</span>
          </div>
          <!-- <div style="display: flex; margin: 10px 0 10px 0">
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">酒店名称:</span>
              <span>哈哈哈哈哈</span>
            </div>
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">房型名称:</span>
              <span>大床房</span>
            </div>
            <div>
              <span style="margin: 0 10px 0 0">总价格:</span>
              <span>￥111.11</span>
            </div>
          </div> -->
          <hr />
          <div style="display: flex; margin: 20px 0 10px 0">
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">预留款余额:</span>
              <span>￥{{ custmerBankInfo.userMoneyNumber }}</span>
            </div>
            <div style="display: flex; margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">使用金额:</span>
              <el-input
                @input="inputUseUserMoney"
                v-model="useUserMoneyNumber"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                style="width: 100px"
                placeholder="请输入金额"
              ></el-input>
            </div>
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">使用后余额:</span>
              <span
                >￥{{
                  numFilter(
                    custmerBankInfo.userMoneyNumber - useUserMoneyNumber
                  )
                }}</span
              >
            </div>
          </div>
          <div style="display: flex; margin: 20px 0 10px 0">
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">金币余额:</span>
              <span>￥{{ custmerBankInfo.userSpeciesNumber }}</span>
            </div>
            <div style="display: flex; margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">使用金额:</span>
              <el-input
                v-model="useUserSpeciesNumber"
                @input="inputUseUserSpecies"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                style="width: 100px"
                placeholder="请输入金额"
              ></el-input>
            </div>
            <div style="margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">使用后余额:</span>
              <span
                >￥{{
                  numFilter(
                    custmerBankInfo.userSpeciesNumber - useUserSpeciesNumber
                  )
                }}</span
              >
            </div>
          </div>
          <div style="display: flex; margin: 0 50px 0 0">
            <span style="margin: 0 10px 0 0">支付类型:</span>
            <el-select
              v-model="shipvalue"
              style="width: 150px"
              placeholder="请选择支付类型"
              size="mini"
              clearable
            >
              <el-option
                v-for="item in certificate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div v-if="shipvalue == 'wkwm'" class="bankBox">
            <div style="display: flex; margin: 0 50px 0 0">
              <span style="margin: 0 10px 0 0">选择银行卡</span>
              <el-select
                size="mini"
                v-model="bankCardId"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in custmerBankInfo.userBankCardList"
                  :key="item.id"
                  :label="item.bankName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button size="mini" type="primary" @click="addBank()"
                >新增银行卡</el-button
              >
            </div>
          </div>
          <div style="margin: 20px 0 10px 0">
            <span style="margin: 0 10px 0 0">支付明细:</span>
            <span>房费:</span>
            <span style="margin: 0 50px 0 0">￥{{ payData.payPrice }}</span>
            <span>预留款:</span>
            <span style="margin: 0 50px 0 0"
              >￥{{ numFilter(useUserMoneyNumber) }}</span
            >
            <span>金币:</span>
            <span style="margin: 0 50px 0 0"
              >￥{{ numFilter(useUserSpeciesNumber) }}</span
            >
            <span>实付款金额:</span>
            <span
              >￥{{
                numFilter(
                  payData.payPrice - useUserMoneyNumber - useUserSpeciesNumber
                )
              }}</span
            >
          </div>
          <div
            style="
              display: flex;
              margin: 30px 0 10px 0;
              justify-content: space-between;
            "
          >
            <div>
              <span style="color: #828282">在线支付:</span>
              <span style="color: #de7d4c; font-size: 24px"
                >￥{{
                  numFilter(
                    payData.payPrice - useUserMoneyNumber - useUserSpeciesNumber
                  )
                }}</span
              >
            </div>
            <div>
              <!-- <el-button type="warning" >取消订单</el-button> -->
              <el-button type="primary" style="color: #fff" @click="ifHotelpay"
                >确认支付</el-button
              >
            </div>
          </div>
          <div v-if="drawing.cardNumber">
            <div>银行名称：{{ drawing.bankName }}</div>
            <div>卡号：{{ drawing.cardNumber }}</div>
            <div>手机号：{{ drawing.obligatePhone }}</div>
            <div>有效期：{{ drawing.creditCardTime }}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog
      title="新增银行卡"
      :visible.sync="newBankDialogVisible"
      width="30%"
      center
    >
      <el-form
        ref="bankFrom"
        :model="bankFrom"
        size="mini"
        :rules="bankFromRules"
        label-width="110px"
        inline
      >
        <el-form-item label="卡类型" prop="cardType">
          <el-select
            clearable
            v-model="bankFrom.cardType"
            style="width: 200px"
            placeholder="必选"
            size="mini"
          >
            <el-option
              v-for="item in bankcardType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNumber">
          <el-input
            @blur="elInputBlur"
            oninput="value=value.replace(/[^\d]/g,'')"
            size="mini"
            style="width: 200px"
            v-model.trim="bankFrom.cardNumber"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行名称">
          <el-input
            size="mini"
            style="width: 200px"
            v-model="bankFrom.bankName"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item label="持卡人" prop="cardholder">
          <el-input
            size="mini"
            style="width: 200px"
            v-model="bankFrom.cardholder"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item label="持卡人手机号" prop="reservePhone">
          <el-input
            size="mini"
            style="width: 200px"
            v-model="bankFrom.reservePhone"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="userType">
          <el-select
            style="width: 200px"
            v-model="bankFrom.userType"
            placeholder="请选择证件类型"
            clearable
          >
            <el-option
              v-for="item in mold"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="userCertificate">
          <el-input
            style="width: 200px"
            size="mini"
            v-model="bankFrom.userCertificate"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="cvv2"
          label="cvv2"
          v-if="bankFrom.cardType == 'creditcard'"
        >
          <el-input
            size="mini"
            style="width: 200px"
            v-model="bankFrom.cvv2"
            placeholder="必填"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="creditFailureDate"
          label="证件有效期"
          v-if="bankFrom.cardType == 'creditcard'"
        >
          <el-date-picker
            size="mini"
            style="width: 200px"
            v-model="bankFrom.creditFailureDate"
            placeholder="必填"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newBankDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('bankFrom')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="支付窗口"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>请您扫码支付</span>
      <!-- 二维码 -->
      <div class="index-body" v-if="qrcode">
        请将此二维码发给会员
        <div class="QRCodeurl">
          <img :src="this.qrcode" alt="" />
          <!-- 这里的src的值就是生成的二维码的地址 -->
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="closeall()"
                      >确 定</el-button
                    > -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  name: "pay",
  data() {
    return {
      // 新增银行卡
      newBankDialogVisible: false,
      payData: this.$route.params.data,
      custmerInfo: this.$route.params.huiyuan,
      // 会员预留款金币银行卡详情
      custmerBankInfo: {},
      // 银行卡信息
      bankCardId: "",
      qrcode: "",
      bankFrom: {
        choose: "",
        bankName: "",
        cardNumber: "",
        cardType: "",
        cardholder: "",
        reservePhone: "",
        userCertificate: "",
        userType: "",
        bankId: "",
        cvv2: "",
        creditFailureDate: "",
      },
      // 银行卡新增校验
      bankFromRules: {
        cardNumber: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        bankName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        cardholder: [
          { required: true, message: "请输入持卡人姓名", trigger: "blur" },
        ],
        reservePhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        userCertificate: [
          { required: true, message: "请输入证件号", trigger: "blur" },
        ],
        userType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        creditFailureDate: [
          { required: true, message: "请选择过期时间", trigger: "change" },
        ],
        cvv2: [{ required: true, message: "请输入cvv2", trigger: "blur" }],
        cardType: [{ required: true, message: "请选择", trigger: "change" }],
      },
      // 支付类型
      shipvalue: "",

      mold: [
        {
          value: "ZGJMSFZ",
          label: "身份证",
        },
        {
          value: "MILITARY",
          label: "军人证",
        },
        {
          value: "HZ",
          label: "护照",
        },
        {
          value: "GAJMLWNDTXZ",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "GATJMJZZ",
          label: "港澳台居民居住证",
        },
        {
          value: "TWJMLWDLTXZ",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "WGRYJJLSFZ",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "HKB",
          label: "户口本",
        },
        {
          value: "BIRTH",
          label: "出生证明",
        },
      ],
      // 使用预留款金额
      useUserMoneyNumber: 0,
      // 使用金币金额
      useUserSpeciesNumber: 0,
      // 支付方式显示
      yeebaoshow: false,

      loading: false,

      totalprice: 0,
      // 新增银行卡
      type: "",
      drawingid: "",
      // 银行卡类型
      bankcardType: [
        {
          value: "creditcard",
          label: "信用卡",
        },
        {
          value: "debitcard",
          label: "储蓄卡",
        },
      ],
      // 支付类型
      certificate: [
        {
          value: "wkwm",
          label: "银行卡",
        },
        {
          value: "ylewm",
          label: "银联二维码",
        },
      ],
      drawing: {},
      centerDialogVisible: false,
      // 确认支付
      Bankcard: {
        cardNumber: "",
        creditCardTime: "",
        cardholder: "",
        obligatePhone: "",
        documentsTyp: "",
        documentsPhone: "",
      },

      activeName: "first",
    };
  },
  methods: {
    addBank() {
      this.newBankDialogVisible = !this.newBankDialogVisible;
    },
    // 卡号输入框失去焦点事件
    elInputBlur(row) {
      if (
        this.bankFrom.cardNumber.length == 16 ||
        this.bankFrom.cardNumber.length == 17 ||
        this.bankFrom.cardNumber.length == 19
      ) {
        this.$axios
          .getBankCardById({
            cardNumber: this.bankFrom.cardNumber,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.bankFrom.bankName = res.data.bankName;
              this.bankFrom.bankId = res.data.id;
            }
          });
      }
    },
    // 确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getaddUsrBackCard();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增银行卡
    getaddUsrBackCard() {
      this.$axios
        .getaddUsrBackCard({
          userId: this.custmerInfo.id,
          bankId: this.bankFrom.bankId,
          bankName: this.bankFrom.bankName,
          cardNumber: this.bankFrom.cardNumber,
          cardType: this.bankFrom.cardType,
          reservePhone: this.bankFrom.reservePhone,
          CVV2: this.bankFrom.cvv2,
          creditFailureDate: this.bankFrom.creditFailureDate,
          userType: this.bankFrom.userType,
          userCertificate: this.bankFrom.userCertificate,
          cardholder: this.bankFrom.cardholder,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.bankCardId = res.data.id;
            this.getqueryUserByCardOrder();
            this.bankFrom = {};
            this.newBankDialogVisible = !this.newBankDialogVisible;
          }
        });
    },
    closeall() {
      this.$router.push({
        name: "orderquery",
      });
    },

    chooseBankItem(val) {
      let List = [];
      List = this.custmerBankInfo.userBankCardList.filter((item) => {
        return item.id == val;
      });
      this.bankFrom = List[0];
      console.log(this.bankFrom);
    },
    getqueryUserByCardOrder() {
      this.$axios
        .getqueryUserByCardOrder({
          phone: this.custmerInfo.userAccount || "0",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.custmerBankInfo = res.data;
          }
        });
    },

    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      if (realVal >= 0) {
        return realVal;
      } else {
        return 0;
      }
    },

    // 使用预留款事件
    inputUseUserMoney(row) {
      if (this.custmerBankInfo.userMoneyNumber < row) {
        this.$message({
          message: "使用金额不得大于预留款现有金额",
          type: "warning",
        });
        this.useUserMoneyNumber = this.custmerBankInfo.userMoneyNumber;
      }
    },
    // 使用预留款事件
    inputUseUserSpecies(row) {
      if (this.custmerBankInfo.userSpeciesNumber < row) {
        this.$message({
          message: "使用金额不得大于金币余额",
          type: "warning",
        });
        this.useUserSpeciesNumber = this.custmerBankInfo.userSpeciesNumber;
      }
    },

    // 确定跳转页面
    jump() {
      this.$router.push({
        name: "orderquery",
        params: {
          Order: this.$route.params.dfghdfdList,
          type: "jump",
        },
      });
      // this.$router.go(0)
    },
    // 判断支付类型
    ifHotelpay() {
      if (this.shipvalue != "") {
        this.hotelPay();
      } else {
        this.$message({
          message: "请选择支付方式",
          type: "warning",
        });
      }
    },

    // 确认银行卡支付
    hotelPay() {
      this.showLoading();
      this.$axios
        .gethotelPay({
          id: this.payData.orderId,
          bankCardId: this.bankCardId,
          payType: this.shipvalue,
          userMoneyNumber: this.useUserMoneyNumber,
          userSpeciesNumber: this.useUserSpeciesNumber,
        })
        .then((res) => {
          this.closeLoading();
          console.log(res);

          if (res.code == "00000") {
            if (this.shipvalue == "wkwm") {
              if (res.data.payStatus == "haspay") {
                this.$message({
                  message: "支付成功",
                  type: "success",
                });
                this.$router.push({
                  name: "orderquery",
                  params: {
                    type: "jump",
                  },
                });
              }
            } else if (this.shipvalue == "ylewm") {
              console.log(res);
              this.qrcodeed(res.data.billQRCode);
              this.centerDialogVisible = true;
            }
          } else {
            this.$message({
              message: "失败",
              type: "error",
            });
          }
        });
    },

    // 二维码生成
    qrcodeed(billQRCode) {
      QRCode.toDataURL(billQRCode, {
        //这个this.url就是你扫码后要跳转的地址
        version: 7, //版本号
        errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
        width: 280, //设置二维码图片大小
        height: 280,
      })
        .then((url) => {
          console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcode = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },
  created() {
    console.log(this.$route.params);
  },
  mounted() {
    this.getqueryUserByCardOrder();
  },
};
</script>

<style scoped>
.tab {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
}
.bankBox {
  margin: 10px 10px;
  padding: 10px 0;
  border-top: 1px solid #bebbbb;
  border-bottom: 1px solid #bebbbb;
}
</style>